<template>
    <view class="conditions Han">
        <scroll-view style="height: 100%;" scroll-y="true">
            <view class="condition">
                <view class="title lgTitle">
                    学历要求
                </view>

                <view class="typeList mgrey">
                    <view class="typeItem md4Text" :class="{Active: eduArr.length == 0}" @click="setEdu(item);">
                        不限
                    </view>
                    <view class="typeItem md4Text" :class="{Active: eduArr.indexOf(item) > -1}"
                        v-for="(item,index) in eduList" :key="index" @click="setEdu(item);">
                        {{item}}
                    </view>
                </view>
            </view>
            <view class="condition">
                <view class="title lgTitle">
                    薪资待遇(单选)
                </view>

                <view class="typeList mgrey">
                    <view class="typeItem md4Text" :class="{Active: salary == ''}" @click="setSalary('');">
                        不限
                    </view>
                    
                    <view class="typeItem md4Text" :class="{Active: salary == item}"
                        v-for="(item,index) in salaryList" :key="index" @click="setSalary(item);">
                        {{item}}
                    </view>
                </view>
            </view>
            <view class="condition">
                <view class="title lgTitle">
                    经验要求
                </view>

                <view class="typeList mgrey">
                    <view class="typeItem md4Text" :class="{Active: expArr.length == 0}" @click="setExp('');">
                        不限
                    </view>
                    <view class="typeItem md4Text" :class="{Active: expArr.indexOf(item) > -1}"
                        v-for="(item,index) in expList" :key="index" @click="setExp(item);">
                        {{item}}
                    </view>
                </view>
            </view>
        </scroll-view>

        <view class="bar">
            <view class="cancel md2Title middle" @click="clearAll">
                清除
            </view>

            <view class="confirm md2Title middle" @tap="searchCon">
                确定
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                eduList: [],
                eduArr: [],
                salaryList: ['5K以下', '5-10K', '10-15K', '15-20K', '20K以上'],
                salary: '',
                expList: [],
                expArr: [],
            };
        },
        onLoad() {
            this.getEduList();
            this.getExpList();
            var filter = uni.getStorageSync('filter');
            if(filter) {
                this.eduArr = filter.eduArr || [];
                this.salary = filter.salary || '';
                this.expArr = filter.expArr || [];
            }
        },
        methods: {
            getEduList() {
                this._ajax({
                    url: '/api/index/getEduList',
                    success: res => {
                        if (res.code == 1) {
                            this.eduList = res.data;
                        }
                    }
                })
            },
            getExpList() {
                this._ajax({
                    url: '/api/index/getExpList',
                    success: res => {
                        if (res.code == 1) {
                            this.expList = res.data;
                        }
                    }
                })
            },
            setEdu(v) {
                if(v) {
                    if(this.eduArr.indexOf(v) > -1) {
                        this.eduArr.splice(this.eduArr.indexOf(v), 1);
                    }else{
                        this.eduArr.push(v);
                    }
                }else {
                    this.eduArr = [];
                }
            },
            setExp(v) {
                if(v) {
                    if(this.expArr.indexOf(v) > -1) {
                        this.expArr.splice(this.expArr.indexOf(v), 1);
                    }else{
                        this.expArr.push(v);
                    }
                }else {
                    this.expArr = [];
                }
            },
            setSalary(v) {
                this.salary = v;
            },
            clearAll() {
                this.eduArr = [];
                this.salary = '';
                this.expArr = [];
            },
            searchCon() {
        	    uni.setStorageSync('filter', {
                    eduArr: this.eduArr,
                    salary: this.salary,
                    expArr: this.expArr
                });
                this._toBack();
            },
            getThis(con, conIndex, typeIndex) {
                con.ins = typeIndex;
            }
        }
    };
</script>

<style scoped lang="less">
    .conditions {
        width: 100%;
        height: calc(100% - 116upx);
        padding: 40upx 30upx 116upx;

        .title {
            font-weight: bold;
            margin-bottom: 30upx;
        }

        .typeList {
            display: flex;
            width: 100%;
            flex-wrap: wrap;
            // justify-content: space-between;

            .typeItem {
                background-color: #f5f5f5 !important;
                text-align: center;
                line-height: 50rpx;
                width: 210rpx;
                height: 50rpx;
                margin-bottom: 20rpx;
                margin-top: 20rpx;
                border: 1px solid transparent;
                margin-right: 30rpx;
                box-sizing: border-box;
            }

            .typeItem:nth-child(3n) {
                margin-right: 0;
            }

            .Active {
                border: 1px solid #3465B1 !important;
                color: #3465B1 !important;
            }
        }
    }

    .condition {
        margin-bottom: 30upx;
    }

    .bar {
        width: 100vw;
        height: 116upx;
        box-shadow: 0px -10px 80px rgba(167, 167, 167, 0.16);
        position: fixed;
        background: #FFFFFF;
        bottom: 0;
        left: 0;
        padding: 18upx 32upx;
        display: flex;
        justify-content: space-between;


        .cancel {
     		     width: 260upx;
            height: 80upx;
            background: #F5F5F5;
            border-radius: 66upx;
            color: #333;
        }

        .middle {
            text-align: center;
            line-height: 80upx;

        }


        .confirm {
            width: 398upx;
            height: 80upx;
            background: linear-gradient(110deg, #3465B1 0%, #5577AE 100%);
            border-radius: 150upx;
            color: #fff;
        }
    }
</style>
